<template>
  <div class="demo">
    <h2>这是一个App组件</h2>
    <p>APP组件中的数据:{{ msg }}</p>
    <button @click="msg += '@'">修改数据</button>
    <hr />
    <HelloWorld></HelloWorld>
  </div>
</template>

<script>
import { ref, provide } from "vue"
import HelloWorld from "./components/HelloWorld.vue"
export default {
  name: "App",
  components: { HelloWorld },
  setup() {
    let num = ref(10)
    let msg = ref("hello App123")

    // 借助于provider将数据共享出去
    provide("aaa", msg)
    return {
      num,
      msg,
    }
  },
}
// 由于V3支持V2的绝大多数特性,在V3里面写V2语法都是可以跑起来的
</script>

<style>
.demo {
  width: 700px;
  height: 400px;
  background-color: blue;
}
</style>
